<template>
  <div align="center">
    <h2>房型添加</h2>
  <table border="1">
    <tr>
      <td>房间号</td>
      <td>
        <input type="text" v-model="state.hN_id">
      </td>
    </tr>
    <tr>
      <td>房型</td>
      <td><input type="text" v-model="state.h_name"></td>
    </tr>
    <tr>
      <td>房型面积</td>
      <td><input type="text" v-model="state.h_area"></td>
    </tr>
    <tr>
      <td>价格</td>
      <td>
        <input type="text" v-model="state.h_price">
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="button" value="增加" @click="add">
      </td>
    </tr>
  </table>
  </div>
</template>

<script setup lang="ts">
import { reactive,toRefs } from 'vue';
import axios from 'axios';

import { useRouter } from 'vue-router';
let router = useRouter()

let data = reactive({
  state:{
    hN_id:'',
    h_name:'',
    h_area:'',
    h_price:'',
  }
})
let {state} = toRefs(data)

const add=()=>{
  if(state.value.hN_id == ""){
    alert("房间号不能为空");
    return
  }
  if(state.value.h_name == ""){
    alert("房型不能为空");
    return;
  }

  axios({
    url:'/api/House/HouseTypeAdd',
    method:'post',
    data:state.value
  })
  .then(res=>{
    console.log(res)
    if(res.data.data == -1){
      alert("房型已存在");
      return;
    }
    else if(res.data.data > 0){
      alert("房型增加成功");
      router.push('/houselist')
    }
    else{
      alert("房型增加失败");
      return;
    }
  })
  .catch(err=>{
    console.log(err)
  })
}
</script>

<style scoped>

</style>